<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML5 box-shadow</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ 
	background:#d7d7d7;
}
#demo{ 
	display:inline-block; 
	position:relative; 
	margin:50px; 
	padding:20px; 
	background:#fafafa; 
	box-shadow:0 0 3px rgba(0, 0, 0, 0.2); 
	-moz-border-radius:4px; 
	border-radius:4px; 
	color:rgba(0,0,0, 0.8); 
	text-shadow:0 1px 0 #fff;
}
#demo::before, #demo::after{ 
	position:absolute; /*  position:absolute;content:""; top:10px; bottom:15px; left:10px; width:50%  */
	content:"";       /*上面这几句构建了一个一半大小的空的块，用来制作阴影 */
	top:10px; 
	bottom:15px; 
	left:10px; 
	width:50%; 
	box-shadow:0 15px 10px rgba(0, 0, 0, 0.5); 
	-webkit-transform: rotate(-3deg); 
	-moz-transform:rotate(-3deg); 
	-o-transform:rotate(-3deg); 
	-ms-transform:rotate(-3deg); 
	transform:rotate(-3deg); z-index:-1;
}
#demo::after{ 
	right:10px; 
	left:auto; 
	-webkit-transform:rotate(3deg); 
	-moz-transform:rotate(3deg); 
	-o-transform:rotate(3deg); 
	-ms-transform:rotate(3deg); 
	transform: rotate(3deg);
}
#demo img{ 
	vertical-align:bottom;
}
</style>
</head>
<body>
<div id="demo">
  <img src="MyCI/1/images/img2.jpg" width="580"  />
</div>
</body>
</html>
